import React from "react";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import { FormInstance } from "antd";
import { register } from "@/services";
import styles from "./index.less";

interface RegisterPageProps {
  form: FormInstance;
  from: string;
  toggleMode: () => void;
}

const RegisterPage: React.FC<RegisterPageProps> = ({
  form,
  from,
  toggleMode,
}) => {
  const onFinish = async (values: { username: string; password: string }) => {
    // 模拟API调用
    const { username, password } = values;
    const res = await register({ username, password });
    if (res) {
      message.success("注册成功！");
      toggleMode();
    }
  };

  return (
    <div className={styles["auth-form"]}>
      <Form
        form={form}
        name="register"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入用户名" }]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            { required: true, message: "请输入密码" },
            { min: 6, message: "密码至少6位" },
          ]}
        >
          <Input.Password prefix={<LockOutlined />} placeholder="密码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            注册
          </Button>
        </Form.Item>

        <div className={styles["form-actions"]}>
          <Button type="link" onClick={() => toggleMode()}>
            已有账号？立即登录
          </Button>
        </div>
      </Form>
    </div>
  );
};

export default RegisterPage;
